<script setup>

import CommonBox from "../../components/CommonBox.vue";
import {onMounted, ref} from "vue";
import screenApi from "../../router/screen.js";


const option = ref(
    {
      legend: {
        orient: 'vertical',
        right: 20,
        top: '30%',
        textStyle: {
          color: 'white'
        },
      },
      tooltip: {
        trigger: 'axis',
        showContent: true
      },
      xAxis: {
        type: 'category',
        data: ['一月', '二月', '三月', '四月', '五月', '六月' ]
      },
      yAxis: { gridIndex: 0 },
      series: [
        {
          name: '金额',
          type: 'bar',
          data: [3, 79, 98, 58, 40, 79]
        },
        {
          name: '数量',
          type: 'bar',
          data: [2, 42, 110, 78, 20, 90]
        }

      ]
    });

const zcData = ref({
  xAxis: {
    type: 'category',
    data: ['笔筒包装袋', '钢条', '供应商管理解决方案', '进存销解决方案', 'finebi'],
    axisLabel: {
      formatter: function(value) {
        return value;
      },
      rotate: 45  // 设置标签倾斜的角度，正值表示逆时针旋转，负值表示顺时针旋转
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [0, 3, 33, 40, 32],
      type: 'bar',
      label: {
        show: true,
        position: 'inside',
        color: '#ffffff',
        formatter: function (params) {
          return params.data;
        }
      }
    }
  ]
});

const fcData = ref({
  xAxis: {
    type: 'category',
    data: ['笔筒包装袋', '钢条', '供应商管理解决方案', '进存销解决方案', 'finebi'],
    axisLabel: {
      formatter: function(value) {
        return value;
      },
      rotate: 45  // 设置标签倾斜的角度，正值表示逆时针旋转，负值表示顺时针旋转
    }
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [0, 3, 33, 40, 32],
      type: 'bar',
      label: {
        show: true,
        position: 'inside',
        color: '#ffffff',
        formatter: function (params) {
          return params.data;
        }
      }
    }
  ]
});


//定义map对象
function getPurchaseMonthData() {
  screenApi.getPurchaseMonthData().then(res=>{
    option.value.series[0].data = res.purchaseAmount;
    option.value.series[1].data = res.purchaseQuantity;
    option.value.xAxis.data = res.monthName;
  });
  screenApi.getPurchaseSubData().then(res=>{
    zcData.value.series[0].data = res.mainValue;
    zcData.value.xAxis.data = res.mainName;
    fcData.value.series[0].data = res.auxValue;
    fcData.value.xAxis.data = res.auxName;
  });
}

onMounted(async () => {
  getPurchaseMonthData();
});

</script>

<template>
  <common-box>
    <div class="chart-header">
      采购金额与数量月度趋势
    </div>
    <div style="height: 15em;width: 100%;">
      <v-chart :option="option"></v-chart>
    </div>
  </common-box>
  <common-box>
    <div class="chart-header">
      采购主材料金额统计
    </div>
    <div style="height: 15em;width: 100%;">
      <v-chart :option="zcData"></v-chart>
    </div>
  </common-box>
  <common-box>
    <div class="chart-header">
      采购辅材料金额统计
    </div>
    <div style="height: 15em;width: 100%;">
      <v-chart :option="fcData"></v-chart>
    </div>
  </common-box>
</template>

<style scoped>
.chart-header {
  text-align: center;
  font-size: 1.5em;
  padding: 0.2em 0 0.2em 1em;
}
</style>